<template>
  <div class="bg">
    <div class="content">
      <div class="title" v-if="isLogin">登录</div>
      <div class="title" v-else>注册</div>
      <div>
        <el-form
          ref="formRef"
          :model="formLogin"
          label-width="auto"
          class="demo-dynamic"
        >
          <el-form-item label-width="100" label="用户名：" prop="name" :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ]">
            <el-input  v-model="formLogin.name" placeholder="请输入用户名"/>
          </el-form-item>
          <el-form-item label-width="100" label="密码：" prop="password" :rules="[
            { required: true, message: '请输入密码', trigger: 'blur' },
          ]">
            <el-input type="password" show-password v-model="formLogin.password" placeholder="请输入密码"/>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" @click="onSubmit(formRef)" v-if="isLogin">
              登录
            </el-button>
            <el-button class="btn" @click="onSubmit(formRef)" v-else>
              注册并登录
            </el-button>
          </el-form-item>
          <el-form-item class="change" v-if="isLogin" @click="changeLogin">
            返回注册
          </el-form-item>
          <el-form-item class="change" v-if="!isLogin" @click="changeLogin">
            返回登录
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {useUserStore} from "@/store/user.js";
import {useRouter} from "vue-router";
import {reqUserInfo} from "@/api/user";
const userStore=useUserStore()
const router = useRouter();
const {user,setUser,setUserInfo}=userStore
const isLogin=ref(true)

const formRef = ref()
const formLogin=ref({
  name:'',
  password:''
})

const changeLogin=()=>{
  isLogin.value=!isLogin.value
}

const onSubmit=async (formEl)=>{
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if(isLogin.value) {
        request.post('/login',formLogin.value).then(res=>{
          if(res.code==200) {
            setUser(res.data)
           
            reqUserInfo({nickname:formLogin.value.name}).then(res1=>{
             if(res1.code==200){
              localStorage.setItem('userInfo',JSON.stringify(res1.data[0]))
             }
            })
            
            router.push('/')
          }
          ElMessage({
            type: res.msg,
            message: res.msg,
          })
        })
      } else {
        request.post('/register',formLogin.value).then(res=>{
          if(res.code==200) {
            setUser(res.data)
            router.push('/')
          }
          ElMessage({
            type: res.msg,
            message: res.msg,
          })
        })
      }

    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style scoped>
form {
  padding: 20px;
}
.bg {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: url("@/assets/images/Login/normal_u0.jpg");
  background-size: cover; /* 背景图片尺寸设置为 cover */

}
.content {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 400px;
  height: 329px;
  background-color:  rgba(237, 242, 242, 0.4);
  .title {
    margin-top: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
  }
}
:deep(.el-input__wrapper) {
  background-color: transparent;
  color: black;
}
.btn {
  margin-left: 50px;
  width: 250px;
  height: 40px;
  border-radius: 35px;
  background-color: #16b78e;
  color: white;
}
.change {
  cursor: pointer;
  margin-left: 50px;
  color:#797979
}
</style>